<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- width 宽度   布局视口的宽度   device 设备 -->
    <!-- <meta name="viewport" content="width=400"> -->
    <!-- <meta name="viewport" content="width=device-width"> -->
    <!-- initial-scale initial 初始化  scale 比例 -->
    <!-- <meta name="viewport" content="initial-scale=0.5"> -->
    <!-- <meta name="viewport" content="initial-scale=2"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <!-- <meta name="viewport" content="width=800, initial-scale=0.5"> -->

    <!-- 控制视觉视口   -->
    <!-- <meta name="viewport" content="minimum-scale=1"> -->
    <!-- <meta name="viewport" content="maximum-scale=1"> -->
    <!-- <meta name="viewport" content="maximum-scale=1, minimum-scale=1"> -->

    <!-- user 用户  scalable 是否可以缩放页面 -->
    <meta name="viewport" content="user-scalable=yes">
    <style>
        
        #box{
            clear:both;
            width: 200px;
            height: 200px;
            border:solid 1px #666;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    <script>
        //获取布局视口的宽度
        console.log(document.documentElement.clientWidth)

        //获取元素
        let box = document.querySelector('#box');

        setInterval(() => {
            box.innerHTML = '布局视口的大小为: '
                        +document.documentElement.clientWidth 
                        + '<br>视觉视口的大小为:'
                        + window.visualViewport.width
        }, 100)
    </script>
</body>
</html>